<template>
	<div class="container">
		<!-- 奇数盒子 -->
		<div class="container-odd">
			<!-- 渲染从此处开始 -->
			<div class="container-item">
				<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=752121999,1814179823&fm=200&gp=0.jpg" />
				<div class="content many-overflow-hide">
					多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点
				</div>
				<div class="avatar-name-wrapper one-overflow-hide">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546860010590&di=6d5dd846de663fd55683f1670d1a5dfa&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D2638798595%2C3220462867%26fm%3D214%26gp%3D0.jpg" />
					<span>阿超最帅</span>
				</div>
				<div class="time-click-wrapper">
					<span>时间，使用day.js</span>
					<div class="right-click-count">
						<img src="../../assets/icon/yuedu-3.png" />
						<span>1234</span>
					</div>
				</div>
			</div>
			<!-- 渲染从此处开始 -->
			<div class="container-item">
				<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=468505699,448494782&fm=26&gp=0.jpg" />
				<div class="content many-overflow-hide">
					多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点
				</div>
				<div class="avatar-name-wrapper one-overflow-hide">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546860010590&di=6d5dd846de663fd55683f1670d1a5dfa&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D2638798595%2C3220462867%26fm%3D214%26gp%3D0.jpg" />
					<span>阿超最帅</span>
				</div>
				<div class="time-click-wrapper">
					<span>时间，使用day.js</span>
					<div class="right-click-count">
						<img src="../../assets/icon/yuedu-3.png" />
						<span>1234</span>
					</div>
				</div>
			</div>
			<!-- 渲染从此处开始 -->
			<div class="container-item">
				<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=752121999,1814179823&fm=200&gp=0.jpg" />
				<div class="content many-overflow-hide">
					多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点
				</div>
				<div class="avatar-name-wrapper one-overflow-hide">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546860010590&di=6d5dd846de663fd55683f1670d1a5dfa&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D2638798595%2C3220462867%26fm%3D214%26gp%3D0.jpg" />
					<span>阿超最帅</span>
				</div>
				<div class="time-click-wrapper">
					<span>时间，使用day.js</span>
					<div class="right-click-count">
						<img src="../../assets/icon/yuedu-3.png" />
						<span>1234</span>
					</div>
				</div>
			</div>
			<!-- 渲染从此处开始 -->
			<div class="container-item">
				<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=468505699,448494782&fm=26&gp=0.jpg" />
				<div class="content many-overflow-hide">
					多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点
				</div>
				<div class="avatar-name-wrapper one-overflow-hide">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546860010590&di=6d5dd846de663fd55683f1670d1a5dfa&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D2638798595%2C3220462867%26fm%3D214%26gp%3D0.jpg" />
					<span>阿超最帅</span>
				</div>
				<div class="time-click-wrapper">
					<span>时间，使用day.js</span>
					<div class="right-click-count">
						<img src="../../assets/icon/yuedu-3.png" />
						<span>1234</span>
					</div>
				</div>
			</div>
			<!-- 渲染从此处开始 -->
			<div class="container-item">
				<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=468505699,448494782&fm=26&gp=0.jpg" />
				<div class="content many-overflow-hide">
					多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点
				</div>
				<div class="avatar-name-wrapper one-overflow-hide">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546860010590&di=6d5dd846de663fd55683f1670d1a5dfa&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D2638798595%2C3220462867%26fm%3D214%26gp%3D0.jpg" />
					<span>阿超最帅</span>
				</div>
				<div class="time-click-wrapper">
					<span>时间，使用day.js</span>
					<div class="right-click-count">
						<img src="../../assets/icon/yuedu-3.png" />
						<span>1234</span>
					</div>
				</div>
			</div>
		</div>
		<!-- 偶数盒子 -->
		<div class="container-even">
			<!-- 渲染从此处开始 -->
			<div class="container-item">
				<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=468505699,448494782&fm=26&gp=0.jpg" />
				<div class="content many-overflow-hide">
					多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点
				</div>
				<div class="avatar-name-wrapper one-overflow-hide">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546860010590&di=6d5dd846de663fd55683f1670d1a5dfa&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D2638798595%2C3220462867%26fm%3D214%26gp%3D0.jpg" />
					<span>阿超最帅</span>
				</div>
				<div class="time-click-wrapper">
					<span>时间，使用day.js</span>
					<div class="right-click-count">
						<img src="../../assets/icon/yuedu-3.png" />
						<span>1234</span>
					</div>
				</div>
			</div>
			<!-- 渲染从此处开始 -->
			<div class="container-item">
				<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3712478332,2007918724&fm=200&gp=0.jpg" />
				<div class="content many-overflow-hide">
					多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点
				</div>
				<div class="avatar-name-wrapper one-overflow-hide">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546860010590&di=6d5dd846de663fd55683f1670d1a5dfa&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D2638798595%2C3220462867%26fm%3D214%26gp%3D0.jpg" />
					<span>阿超最帅</span>
				</div>
				<div class="time-click-wrapper">
					<span>时间，使用day.js</span>
					<div class="right-click-count">
						<img src="../../assets/icon/yuedu-3.png" />
						<span>1234</span>
					</div>
				</div>
			</div>
			<!-- 渲染从此处开始 -->
			<div class="container-item">
				<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=468505699,448494782&fm=26&gp=0.jpg" />
				<div class="content many-overflow-hide">
					多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点
				</div>
				<div class="avatar-name-wrapper one-overflow-hide">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546860010590&di=6d5dd846de663fd55683f1670d1a5dfa&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D2638798595%2C3220462867%26fm%3D214%26gp%3D0.jpg" />
					<span>阿超最帅</span>
				</div>
				<div class="time-click-wrapper">
					<span>时间，使用day.js</span>
					<div class="right-click-count">
						<img src="../../assets/icon/yuedu-3.png" />
						<span>1234</span>
					</div>
				</div>
			</div>
			<!-- 渲染从此处开始 -->
			<div class="container-item">
				<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=468505699,448494782&fm=26&gp=0.jpg" />
				<div class="content many-overflow-hide">
					多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点
				</div>
				<div class="avatar-name-wrapper one-overflow-hide">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546860010590&di=6d5dd846de663fd55683f1670d1a5dfa&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D2638798595%2C3220462867%26fm%3D214%26gp%3D0.jpg" />
					<span>阿超最帅</span>
				</div>
				<div class="time-click-wrapper">
					<span>时间，使用day.js</span>
					<div class="right-click-count">
						<img src="../../assets/icon/yuedu-3.png" />
						<span>1234</span>
					</div>
				</div>
			</div>
			<!-- 渲染从此处开始 -->
			<div class="container-item">
				<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1701327210,991952800&fm=26&gp=0.jpg" />
				<div class="content many-overflow-hide">
					多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点多行打点
				</div>
				<div class="avatar-name-wrapper one-overflow-hide">
					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546860010590&di=6d5dd846de663fd55683f1670d1a5dfa&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D2638798595%2C3220462867%26fm%3D214%26gp%3D0.jpg" />
					<span>阿超最帅</span>
				</div>
				<div class="time-click-wrapper">
					<span>时间，使用day.js</span>
					<div class="right-click-count">
						<img src="../../assets/icon/yuedu-3.png" />
						<span>1234</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {

	}
</script>

<style scoped="scoped" lang="less">
	.container {
		margin-left: .3rem;
		margin-right: .3rem;
		margin-bottom: 1.5rem;
		display: flex;
		justify-content: space-between;

		.container-odd,
		.container-even {
			width: 3.3rem;

			.container-item {
				width: 100%;
				margin-top: .3rem;
				border-radius: .06rem;
				background: #fff;
				box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.03), 0 4px 8px 0 rgba(0, 0, 0, 0.05);

				img {
					border-radius: .06rem;
					width: 100%;
				}

				.content {
					margin-top: .2rem;
					letter-spacing: -0.34px;
				}

				.avatar-name-wrapper {
					margin-top: .2rem;
					margin-bottom: .1rem;
					margin-left: .2rem;
					display: flex;
					align-items: center;

					img {
						width: .5rem;
						height: .5rem;
						border-radius: 50%;
					}

					span {
						font-size: 12px;
						color: #848484;
						margin-left: .1rem;
					}
				}

				.time-click-wrapper {
					display: flex;
					justify-content: space-between;
					font-size: 12px;
					color: #9B9B9B;
					align-content: center;
					padding-bottom: .2rem;
					margin-right: .2rem;
					margin-left: .2rem;
					img {
						width: .3rem;
					}

					.right-click-count {
						display: flex;
						align-items: center;
					}
				}
			}
		}
	}
</style>
